<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="description" content="">
    <meta name="author" content="costa@tsaousis.gr">

 	<title>NetData</title>

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link href="theme.css" rel="stylesheet">
</head>

<body role="document" data-spy="scroll" data-target="#main_menu_div">
    <nav id="mynav" class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container" style="width: 98%;">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_menu_div">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/" id="hostname_id">NetData</a>
        </div>
        <div class="navbar-header navbar-right">
        	<ul class="nav navbar-nav">
        	<li><a href="/">Looking for the new Dashboard?</a></li>
        	</ul>
        </div>
		<form class="navbar-form navbar-right">
			<!-- <div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
			</div> -->
				<button type="button" class="btn btn-primary global_play_button" onClick="buttonGlobalPlayPause('toggle');" data-play-text="<span class='glyphicon glyphicon-pause'></span> Pause" data-pause-text="<span class='glyphicon glyphicon-play'></span> Play" data-toggle="tooltip" data-placement="bottom" title=" click <span class='glyphicon glyphicon-play'></span> to have the graphs auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graphs.">
				<span class="glyphicon glyphicon-pause"></span> Pause
				</button>
			<div class="btn-group btn-group" data-toggle="buttons" role="group">
				<label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show less detail to speed up the browser. Use this if your machine is old and slow.">
					<input type="radio" name="presentation" id="presentation_speedy" onChange="setPresentationSpeedy(0);">Speedy
				</label>
				<label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Balance graphs detail with browser speed. Use this on modern computers.">
					<input type="radio" name="presentation" id="presentation_normal" onChange="setPresentationNormal(0);">Normal
				</label>
				<label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show all the detail there is. This may slow down your browser.">
					<input type="radio" name="presentation" id="presentation_detailed" onChange="setPresentationDetailed(0);">Detailed
				</label>
			</div>
		</form>
        <div class="collapse navbar-collapse" id="main_menu_div">
          <ul class="nav navbar-nav">
            <li><a href="#">preparing charts...</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container graphs" id="maingraph_container" style="display: none;">
		<table>
			<tr><td>
		    	<div class="maingraph">
					<table>
						<tr><td>
						<div class="maingraph" id="maingraph"></div>
						<div id="maingraph_dashboard">
							<div class="maingraph" id="maingraph_hidden" style="display: none"></div>
							<div class="maingraph" id="maingraph_control"></div>
						</div>
						</td></tr>
						<tr><td align="center">
							<div class="btn-group">
								<form id="mainchartform">
									<div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title=" click <span class='glyphicon glyphicon-play'></span> to have the graph auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graph. When paused the graph can be zoomed and panned horizontally." >
										<button type="button" class="btn btn-primary mainchart_play_button" data-play-text="<span class='glyphicon glyphicon-pause'></span>" data-pause-text="<span class='glyphicon glyphicon-play'></span>" onClick="setMainChartPlay('toggle');">
											<span class="glyphicon glyphicon-pause"></span>
										</button>
									</div>
									<div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
										<button type="button" class="btn btn-primary mainchart_avg_button" data-max-text="<span class='glyphicon glyphicon-signal'></span>" data-average-text="<span class='glyphicon glyphicon-align-justify'></span>" onClick="setMainChartGroupMethod('toggle');">
											<span class="glyphicon glyphicon-signal"></span>
										</button>
									</div>
									<div class="btn-group btn-group" data-toggle="buttons" >
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="do not group points, show the raw data">
											<input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group in half, show 1 every 2 points of data">
											<input type="radio" name="group" id="group2" onChange="setMainChartGroup(2);">2
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 3 points of data">
											<input type="radio" name="group" id="group3" onChange="setMainChartGroup(3);">3
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 4 points of data">
											<input type="radio" name="group" id="group4" onChange="setMainChartGroup(4);">4
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 5 points of data">
											<input type="radio" name="group" id="group5" onChange="setMainChartGroup(5);">5
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 10 points of data">
											<input type="radio" name="group" id="group10" onChange="setMainChartGroup(10);">10
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 15 points of data">
											<input type="radio" name="group" id="group15" onChange="setMainChartGroup(15);">15
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 20 points of data">
											<input type="radio" name="group" id="group20" onChange="setMainChartGroup(20);">20
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 30 points of data">
											<input type="radio" name="group" id="group30" onChange="setMainChartGroup(30);">30
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 45 points of data">
											<input type="radio" name="group" id="group45" onChange="setMainChartGroup(45);">45
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 60 points of data">
											<input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60
										</label>
										<label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 90 points of data">
											<input type="radio" name="group" id="group90" onChange="setMainChartGroup(90);">90
										</label>
									</div>
									<div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
										<button type="button" class="btn btn-primary mainchart_max_button" data-maximized-text="<span class='glyphicon glyphicon-resize-small'></span>" data-normal-text="<span class='glyphicon glyphicon-fullscreen'></span>" onClick="setMainChartMax('toggle');">
											<span class="glyphicon glyphicon-fullscreen"></span>
										</button>
									</div>
								</form>
							</div>
							</td></tr>
					</table>
		 	   </div><!-- /.maingraph -->
			</td></tr>
		</table>
	</div>

    <div class="container graphs" id="thumbgraphs_container" style="display: none;">
    	<div id="thumbgraphs">
    	</div>
	</div>

    <div class="container graphs" id="groupgraphs_container" style="display: none;">
    	<div class="allgraphs" id="groupgraphs">
    	</div>
	</div>

    <div class="container" id="splash_container">
		<table width="100%">
			<tr><td id="splash" align="center" style="vertical-align: middle; height: 400px; overflow: auto;">
				<h2>
				Welcome to <b>NetData</b>!
				<br/><br/>
				<span class="glyphicon glyphicon-off"></span>
				<br/><br/>
				loading cosmos
				<br/><br/>
				<span class="label label-default">Please wait...</span>
				</h2>
			</td></tr>
		</table>
	</div>

    <div class="container graphs" id="footer_container">
   		&nbsp;<p/>
   		<hr/>
    	<h4>NetData</h4>
    	Realtime System Information over the web for all linux systems.
    	<p/>
    	Distributed under GPL v2.
    	<p/>
    	(c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
    	<p/>
    	<div id="server_summary_id"></div>
    </div>

	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script type='text/javascript'>
		document.getElementById('splash').height = $(window).height();
	</script>

	<!-- Google AJAX API -->
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

	<!-- NetData -->
	<script type="text/javascript" src="netdata.js"></script>
	<script type="text/javascript" src="index.js"></script>

	<script type='text/javascript'>
		google.load('visualization', '1.1', {packages: ['controls']});

		$(document).ready(function(){

			$(document).on('click','.navbar-collapse.in',function(e) {
				if( $(e.target).is('a') ) {
					$(this).collapse('hide');
				}
			});

			$('body').scrollspy({ target: '#main_menu_div' })
		});
	</script>
</html>
